import { Button } from 'antd';
import { Link } from 'react-router-dom';
import scss from '../../assets/styles/cloudmap.module.scss';



interface MHeaderProps {
    headerList: any[];
    headerOnClick: (e: any) => void;
}

export const MHeader = ({ headerOnClick, headerList }: MHeaderProps) => {
    return <div className={scss['c-header']}>
        {
            headerList.map((item, index) => {
                return <div
                    key={index}
                    className={scss['c-header-item']}
                    onClick={() => headerOnClick(index)}
                >
                    <Button className={scss['c-header-item-btn']}>{item.title}</Button>
                </div>
            })
        }
    </div>
}
interface MFooterProps {
    footerList: any[];
    headerOnClick?: (e: any) => void;
}

export const MFooter = ({ headerOnClick, footerList }: MFooterProps) => {
    return <div className={scss['c-cloud-map-footer']}>
        {
            footerList.map((item, index) => {
                return <div
                    key={index}
                    className={scss['c-header-item']}

                >
                    <Button className={scss['c-header-item-btn']}>{item.title}</Button>
                </div>
            })
        }
        <div className={scss['cloud-map-footer']}>CLOUD MAP FOOTER</div>
    </div>
}

interface MCloudItemProps {
    clouditemList: any[];
}

export const MCloudItem = ({ clouditemList }: MCloudItemProps) => {
    return <div className={scss['cloud-item']}>
        {
            clouditemList.map((item, index) => {
                return <div>
                    <Button className={scss['ant-btn']}>
                        <Link to={item.path} key={index + item.key}>
                            {item.name}
                        </Link>
                    </Button>
                </div>
            })
        }
    </div>
}